<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head
	th:replace="header/h5header::h5header(${title} != null ? ${title} : '帅小铺-实体创业社群服务平台',
'/assets/H5/css/hlist.css?v=1,/assets/H5/css/bus.css,/assets/css/myswiper.css,/assets/layui/css/layui.css,/assets/module/admin.css',
'/assets/H5/js/flexible.js,/assets/H5/libs/index/khData.js,/assets/js/swiper.min.js
')">
</head>

<body style="font-size: 12px;">
	<input type="hidden" th:value="${columnid}" id="colId">
	<div class="container" style="padding-top: 0">
		<header class="header03">
			<div class="top">
				<div class="return" onclick="history.back(-1)">
					<span class="icon icon-return"></span>
				</div>
				<div class="location">
					<a href="/city">
						<span class="icon icon-location"></span>
						<span th:text="${cityname}"></span>
					</a>
				</div>
				<div class="logo">
					<a href="/">
						<img src="/assets/H5/images/hlogo.png" alt="">
					</a>
				</div>
				<div class="user">
					<a class="need-login" href="/u/profile" data-action="user-center">
						<span class="icon icon-user"></span></a>
				</div>
			</div>

		</header>
		
		<div id="prop" class="tsk-translayer" style="display: none;"></div>

		<a href="/h5search">
			<div class="header-search-list">
				<div class="search-show-box">
					<p class="search-content">
						<span class="icon icon-help-find-search"></span> 
						<span class="like-placeholder">找商铺 租商铺</span>
					</p>
				</div>
			</div>
		</a>
		<div class="center">
			<!-- banner图-->
			<!--轮播-->
			<div id="swiper-three">
				<div class="swiper-container bnc firstSwiper swiper-container-horizontal">
					<div class="swiper-wrapper">
						<div class="swiper-slide" th:each="item:${banners}">
							<a th:href="${item.bannerHref}">
								<img th:src="${item.url}" alt="品牌介绍">
							</a>
						</div>
					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" style="display: none;">
						<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
					</div>
				</div>
			</div>
			<!-- 常用入口 -->
			<div class="entrance">
				<div class="j-row">
					<div class="bd">
						<ul class="julive-project-url">
							<li th:each="item,columnStat:${columns}">
								<a th:href="${'/channel/' + item.columnId}">
									<div class="pic">
										<img class="lazy-timeout-click" th:src="${item.colIcon}" th:alt="${item.columnName}">
									</div>
									<div class="text">
										<p th:text="${item.columnName}"></p>
									</div>
								</a>
							</li>
							<li>
								<a href="/ask">
									<div class="pic">
										<img class="lazy-timeout-click" src="/assets/H5/images/icon/t4.png" alt="买房问问">
									</div>
									<div class="text">
										<p>买房问问</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<!--楼盘检索-->
			<div class="list-wrap">
				<th:block th:if="${columnid > 1}">
					<div class="lpjsV4">
						<div class="screen">
							<ul class="screen-list">
								<li class="screen-item">
									<div class="screen-wrap" lay-event="sele">
										<span class="screen-txt">区域</span> 
										<span class="icon-search-down"></span>
									</div>
									<div class="tab screen-panel panel-area">
										<div class="tab-box">
											<div class="tab-nav2">
												<ul class="tab-select-list">
													<li class="selected">
														<span><em class="active-line"></em>区域</span>
													</li>
												</ul>
											</div>
											<div class="tab-con">
												<div class="nrpart">
													<ul class="tab-option-item area-list">
														<li data-id="" th:class="${regionid == null ? 'active' : ''}" lay-event="areaev">
															<a href="javascript:;">不限</a>
														</li>
														<li th:class="${regionid == item.aid ? 'active' : ''}" lay-event="areaev" th:each="item : ${region}" th:attr="data-id=${item.aid}">
															<a href="javascript:;" th:text="${item.name}"></a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</li>
								<li class="screen-item" th:if="${columnid != 6}">
									<div class="screen-wrap" lay-event="sele">
										<span class="screen-txt">业态类型</span> 
										<span class="icon-search-down"></span>
									</div>
									<div class="tab screen-panel panel-area">
										<div class="tab-box tab-price">
											<div class="tab-nav2">
												<ul class="tab-select-list">
													<li class="selected">
														<span><em class="active-line"></em>业态</span>
													</li>
												</ul>
											</div>
											<div class="tab-con">
												<div class="nrpart">
													<ul class="tab-option-item room-select">
														<li data-id="" th:class="${formatid == null ? 'active' : ''}" lay-event="formatev">
															<a href="javascript:;">不限</a>
														</li>
														<li th:each="item : ${formats}" lay-event="formatev" th:attr="data-id=${item.formatId}" th:class="${formatid == item.formatId + '' ? 'active' : ''}">
															<a href="javascript:;" th:text="${item.formatName}"></a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</li>
								<li class="screen-item" th:if="${columnid == 6}">
									<div class="screen-wrap" lay-event="sele">
										<span class="screen-txt">服务类型</span> 
										<span class="icon-search-down"></span>
									</div>
									<div class="tab screen-panel panel-area">
										<div class="tab-box tab-price">
											<div class="tab-nav2">
												<ul class="tab-select-list">
													<li class="selected">
														<span><em class="active-line"></em>类型</span>
													</li>
												</ul>
											</div>
											<div class="tab-con">
												<div class="nrpart">
													<ul class="tab-option-item server-select">
														<li data-id="" th:class="${serverid == null ? 'active' : ''}" lay-event="serverev">
															<a href="javascript:;">不限</a>
														</li>
														<li th:each="item : ${serverItem}" th:attr="data-id=${item.sid}" lay-event="serverev" th:class="${serverid == item.sid + '' ? 'active' : ''}">
															<a href="javascript:;" th:text="${item.name}"></a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				
					<div class="screen-tag swiper-container swiper-container-horizontal swiper-container-free-mode" id="stag" style="display: none;">
				        <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);" id="tags">
				        	
				        </div>
	    			</div>
				</th:block>
				<!--楼盘列表-->
				<div class="j-row">
					<div class="bd">
						<div class="house-list hl-padding card-list-box" id="listUl"></div>
						<div class="footer-audit">
							<ul>
								<li>重庆骐帅科技有限公司</li>
								<li>地址：重庆市两江新区新南路168号龙湖MOCO1栋27-8</li>
								<li>联系电话：<span>023-86801888</span>
								</li>
								<li>网络经营许可证：渝ICP备18009391号-2</li>
								<li>
									<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxx" style="height: 20px; line-height: 20px; color: #a9bacf; float: none">
										<img src="//static.julive.com/m/images/beian.png?t=20200715_205041" style="float: left;">
										<p style="float: left; height: 20px; line-height: 20px; margin: 0px 0px 0px 5px;">渝公网安备xxxxx号</p>
									</a> 
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script type="text/html" id="qqwww">
	<!-- 有视频 -->
	{{# if(d.videoUrl != null && d.videoUrl != '' ){ }}
		<div class="house-item6 wewe">
			<a class="" href="/details/{{d.articleId}}">    
				<div class="list-con click-position">
					<div class="media-house2">
                       	<div class="pic click-position">
   							<img class="lazy-timeout-click" src="{{d.coverVideo}}" alt="">
               			</div>
						<div class="text">
   							<div class="house-name">
       							<h4 class="click-position">{{d.title}}</h4>
   							</div>
                            <p class="house-infor click-position" style="font-size: 0.32rem;text-align: justify;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;white-space: inherit;-webkit-box-orient: vertical;word-break: break-all;color: #7f7f7f;height: 1.1rem;">
       							{{d.summary}}
   							</p>
   							<div class="dynamic">
								<span class="">{{d.user.nickName}}</span> 
								<span class="">{{d.readSize}}阅读</span> 
								<span class="">{{d.time}}</span> 
   							</div>
						</div>
	  				</div>
				</div>
			</a>
		</div>
	{{# } else { }}
		{{# if(d.imgs.length < 2 ){ }}
			<div class="house-item6">
    			<a class="" href="/details/{{d.articleId}}">    
    				<div class="list-con click-position">
        				<div class="media-house2">
							{{# if(d.coverImage != '' ){ }}
		                		<div class="pic click-position">
		                			<img class="lazy-timeout-click" src="{{d.coverImage}}" alt="">
                    			</div>
							{{#  } }}
   							<div class="text">
       							<div class="house-name">
           							<h4 class="click-position">{{d.title}}</h4>
       							</div>
                                <p class="house-infor click-position" style="font-size: 0.32rem;text-align: justify;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;white-space: inherit;-webkit-box-orient: vertical;word-break: break-all;color: #7f7f7f;height: 1.1rem;">
           							{{d.summary}}
       							</p>
       							<div class="dynamic">
										<span class="">{{d.user.nickName}}</span> 
									<span class="">{{d.readSize}}阅读</span> 
									<span class="">{{d.time}}</span> 
       							</div>
   							</div>
			  			</div>
			 		</div>
 				</a>
			</div>
		{{# } else { }}
	    	<div class="house-item6 Headline-list">
 				<div class="Headline-col" style="padding: 0 .533rem;"> 
					<a href="/details/{{d.articleId}}" class="Headline-colB"> 
						<div class="Headline-colB-d1">
							<h3 class="Headline-colB-H3" style="font-size: .4267rem;">{{d.title}}</h3> 
						</div> 
						<div class="Headline-colB-img"> 
							<ul>   
								{{# layui.each(d.imgs, function(index, item){ }}
									{{# if(index < 3 ){ }}
										<li class="Headline-colB-li">
											<img class="diaryContent-IlImg" src="{{item}}" alt="" />
										</li>
									{{#  } }}
								{{# }); }}
							</ul> 
						</div> 
						<div style="margin-top: 0.2rem;"> 
							<span class="Headline-colB-rS">{{d.user.nickName}}</span> 
							<span class="Headline-colA-rS">{{d.readSize}}阅读</span> 
							<span class="Headline-colB-rS">{{d.time}}</span> 
						</div> 
					</a>   
				</div>
			</div>   								
		{{#  } }}
	{{#  } }}

</script>


<script type="text/javascript">
layui.use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util', 'dataGrid', 'element'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var formX = layui.formX;
    var setter = layui.setter;
    var mynotice = layui.mynotice;
    var admin = layui.admin;
    var $ax = layui.ax;
    var util = layui.util;
    var dataGrid = layui.dataGrid;
    var element = layui.element;
    
    /* 轮播 */
	var mySwiper = new Swiper('.bnc1', {
		direction : 'horizontal', // 垂直切换选项
		autoplay : {
			delay : 5000,
			disableOnInteraction : false,
		}, // 自动切换
		loop : true, // 循环模式选项
		pagination : { // 分页器
			el : '.swiper-pagination',
			type : 'bullets',
			clickable : true,
			renderProgressbar : function(progressbarFillClass) {
				return '<span class="' + progressbarFillClass + '"></span>';
			}
		},
		navigation : { // 如果需要前进后退按钮
			nextEl : '.swiper-button-next',
			prevEl : '.swiper-button-prev',
		}
	})
    
    var sar = '', sfr = '', ser = '';
    
	var ins = dataGrid.render({
        elem: '#listUl',  // 容器
        templet: '#qqwww',  // 模板
        url: '/loadmore/h5/column/' + $('#colId').val(),  // 数据接口
        loadMore: {limit: 10},  // 开启分页
        done: function(res, curr, count){
        	
        }
    });
    
	util.event('lay-event', {
    	sele: function(){
    		$('.screen-panel').css("display", "none");
    		$('.current').removeClass("current");
    		$(this).addClass('current');
    		$('body').css({"position": "fixed", "top": "0px", "width": "100%"});
    		$('.screen').addClass("screen-fixed");
    		$(this).next().css("display", "block");
    		$('#prop').css("display", "block");
    	},
    	areaev: function(){
    		var url = '/loadmore/h5/column/' + $('#colId').val();
    		var region = $(this).data('id');
    		$('.area-list .active').removeClass('active');
    		$(this).addClass('active');
        	var format = $('.room-select .active').data('id');
        	var server = $('.server-select .active').data('id');
        	sar = region;
        	if(region != ''){
        		url += '?region=' + region;
        		$('#stag').css("display", "block");  
            	var ar = $(this).children('a').text();
            	if($("#aretagid").length > 0){
            		$('#aretagid').replaceWith('<div class="tag-item swiper-slide swiper-slide-active" id="aretagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeArea"></span></div>');
           		}else{
           			$('#tags').prepend('<div class="tag-item swiper-slide swiper-slide-active" id="aretagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeArea"></span></div>');
           		}
        	}else{
        		$('#aretagid').remove();
        	}
        	if(format != undefined && format != ''){
        		url += region == '' ? '?format=' + format : '&format=' + format;
        	}
        	if(server != undefined && server != ''){
        		url += region == '' ? '?server=' + server : '&server=' + server;
        	}
        	ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
        	propnone();
    	},
    	formatev: function(){
    		var url = '/loadmore/h5/column/' + $('#colId').val();
    		$('.room-select .active').removeClass('active');
    		$(this).addClass('active');
    		var format = $(this).data('id');
    		sfr = format;
        	var region = $('.area-list .active').data('id');
        	if(region != ''){
        		url += '?region=' + region;
        	}
        	if(format != ''){
        		url += region == '' ? '?format=' + format : '&format=' + format;
        		$('#stag').css("display", "block");  
            	var ar = $(this).children('a').text();
            	if($("#formattagid").length > 0){
                	$('#formattagid').replaceWith('<div class="tag-item swiper-slide swiper-slide-next" id="formattagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeFor"></span></div>');
            	}else{
                	$('#tags').append('<div class="tag-item swiper-slide swiper-slide-next" id="formattagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeFor"></span></div>');
            	}
        	}else{
        		$('#formattagid').remove();
        	}
        	ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
        	propnone();
    	},
    	serverev: function(){
    		var url = '/loadmore/h5/column/' + $('#colId').val();
    		$('.server-select .active').removeClass('active');
    		$(this).addClass('active');
    		var server = $(this).data('id');
    		ser = server;
        	var region = $('.area-list .active').data('id')
        	if(region != ''){
        		url += '?region=' + region;
        	}
        	if(server != ''){
        		url += region == '' ? '?server=' + server : '&server=' + server;
        		$('#stag').css("display", "block");  
            	var ar = $(this).children('a').text();
            	if($("#sertagid").length > 0){
                	$('#sertagid').replaceWith('<div class="tag-item swiper-slide swiper-slide-next" id="sertagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeSer"></span></div>');
            	}else{
                	$('#tags').append('<div class="tag-item swiper-slide swiper-slide-next" id="sertagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeSer"></span></div>');
            	}
        	}else{
        		$('#sertagid').remove();
        	}
        	ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
        	propnone();
    	},
    	closeArea: function(){
    		sar = '';
    		$(this).parent().remove();
    		if($('#tags').children().length == 0){
				$('#stag').css("display", "none");
			}
    		$('.area-list .active').removeClass('active');
			$(".area-list").children(":first").addClass('active');
    		var url = '/loadmore/h5/column/' + $('#colId').val() + '?region' + sar + '&format=' + sfr + '&server=' + ser;
			ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
    	},
		closeFor: function(){
			sfr = '';
			$(this).parent().remove();
			if($('#tags').children().length == 0){
				$('#stag').css("display", "none");
			}
			$('.room-select .active').removeClass('active');
			$(".room-select").children(":first").addClass('active');
			var url = '/loadmore/h5/column/' + $('#colId').val() + '?region' + sar + '&format=' + sfr + '&server=' + ser;
			ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
    	},
		closeSer: function(){
			ser = '';
			$(this).parent().remove();
			if($('#tags').children().length == 0){
				$('#stag').css("display", "none");
			}
			$('.server-select .active').removeClass('active');
			$(".server-select").children(":first").addClass('active');
			var url = '/loadmore/h5/column/' + $('#colId').val() + '?region' + sar + '&format=' + sfr + '&server=' + ser;
			ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
    	}
    }) 
    
    $('#prop').on('click', function(){
		propnone();
    })
    
    function propnone(){
		$('#prop').css("display", "none");
    	$('body').css({"position": "static", "top": "0px", "width": "auto"});
		$('.screen').removeClass("screen-fixed");
		$('.screen-panel').css("display", "none");
		$('.current').removeClass("current");
	}
    
    
});

</script>

</body>
</html>